<template>
  <view>
    <view class="tabs">
      <view class="tab" @click="handleSelectTab(0)" :class="selectIndex === 0 ? 'selected' : ''">
        <view>全部</view>
      </view>
      <view class="tab" @click="handleSelectTab(1)" :class="selectIndex === 1 ? 'selected' : ''">
        <view>狗狗</view>
      </view>
      <view class="tab" @click="handleSelectTab(2)" :class="selectIndex === 2 ? 'selected' : ''">
        <view>猫咪</view>
      </view>
    </view>
    <view class="list">
      <view class="card">
        <view class="introduction-area">
          <img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" alt=""
               class="picture" />
          <view class="text-area">
            <view class="name">泡泡</view>
            <view class="tips">
              <span>成年</span>
              <span>已绝育</span>
              <span>体型片偏胖</span>
            </view>
          </view>
        </view>
        <view class="btn-area">
          <view class="btn">
            <img src="./svg/删除.svg" style="color: lightgray" alt=""/>
            <span style="color: lightgray;">删除</span>
          </view>
          <view class="btn">
            <img src="./svg/编辑.svg" alt=""/>
            <span style="color: #2680f0">编辑</span>
          </view>
          <view class="btn-food">
            <img src="./svg/点餐2.svg" alt=""/>
            <span style="font-size: 25rpx">给我点餐</span>
          </view>
        </view>
      </view>
      <view class="list-border">一一 加载完毕 一一</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0
    };
  },
  methods: {
    handleSelectTab: function(index) {
      this.selectIndex = index
    }
  }
};
</script>

<style scoped>
.tabs {
  display: flex;
  background-color: white;
  justify-content: space-between;
}

.tab {
  padding: 20rpx 50rpx;

}

.selected {
  font-weight: bold;
  border-bottom: 5rpx solid;
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.card {
  margin-top: 30rpx;
  width: 90%;
  height: 190rpx;
  background-color: white;
  border-radius: 20rpx;
}

.introduction-area {
  border-radius: 20rpx 20rpx 0 0;
  border-bottom: 5rpx dotted lightgray;
  width: 100%;
  height: 110rpx;
  display: flex;
  align-items: center;
}

.picture {
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
}
.name {
  font-weight: bold;
  font-size: 28rpx;
}
.tips {
  font-size: 18rpx;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tips span {
  margin-right: 10rpx;
}

.btn-area {
  border-radius: 0 0 20rpx 20rpx;
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn {
  height: 45rpx;
  width: 15%;
  font-size: 23rpx;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
}

.btn:active {
  transform: translate(2rpx);
}

.btn img {
  height: 36rpx;
  width: 36rpx;
  margin-right: 8rpx;
}

.btn-food {
  height: 45rpx;
  width: 40%;
  display: flex;
  justify-content: center;
  justify-items: center;
  border-radius: 30rpx;
  align-items: center;
  background-color: #ffcb57;
  transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
}

.btn-food:active {
  transform: translate(2rpx);
}

.btn-food img {
  height: 36rpx;
  width: 36rpx;
  margin-right: 8rpx;
}


.list-border {
  margin-top: 80rpx;
  font-size: 25rpx;
  color: lightgray;
}

</style>